<template>
  <el-pagination
    v-model:currentPage="page.currentPage"
    v-model:page-size="page.pageSize"
    :page-sizes="[10, 20, 30, 40]"
    :small="small"
    :disabled="false"
    :background="true"
    :layout="layout"
    :total="page.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
const props = defineProps({
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next',
  },
  getTableData: {
    type: Function,
  },
  page: {
    type: Object,
  },
  small: {
    type: Boolean,
  },
})
const handleSizeChange = (val: any) => {
  props.page.pageSize = val
  props.getTableData()
}
const handleCurrentChange = (val: any) => {
  props.page.currentPage = val
  props.getTableData()
}
</script>

<style lang="scss" scoped>
.el-pagination {
  justify-content: flex-end;
  padding: {
    top: 26px;
    bottom: 10px;
  }
  :deep(.el-input--small .el-input__inner){
    height: 24px ;
    line-height: 24px ;
  }
}
</style>
